iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 29
0

多人連線

我們今天使用 socket.io 來創建一個多人的遊戲方式,client 端與 server 端保持連線,server 將數據傳送到每個 client 端,讓 client 端顯示資訊。簡單來說就是 client 與 server 即時雙向通信。

Javascript 內容

// server.js
// 引用 express 模組
let express = require('express')
let app = express()
let server = require('http').Server(app)
app.use(express.static(__dirname + '/public'))
app.get('/', function(req, res) {
    res.sendFile(__dirname + '/index.html') 
})
// 偵聽 8080 port
server.listen(8080, function(){})
// 加入 socket.io
// 偵聽連接與結束連接
io.on('connection', function(socket) {
    console.log('connected')
    socket.on('disconnect', function(){
        console.log('disconnected')
    })
})

// 加入追蹤所有玩家

io.on('connection', function(){
    players[socket.id] = {
        x: Math.floor(Math.random() * 600) + 40,
        y: Math.floor(Math.random() * 600) + 40,
        playerId: socket.id
    }

    socket.emit('currentPlayers', players)
    socket.broadcast.emit('newPlayer', players[socket.id])

    // 玩家結束與 server 連接時,刪除該玩家的數據
    socket.on('disconnect', function(){
        console.log('disconnected')
        delete players[socket.id]
        io.emit('disconnect', socket.id)
    })
})

結論

今天試著使用 socket.io,建立如何多人連線的使用方式。
參考資料如下,有更深入的介紹。
https://gamedevacademy.org/create-a-basic-multiplayer-game-in-phaser-3-with-socket-io-part-1/
https://gamedevacademy.org/create-a-basic-multiplayer-game-in-phaser-3-with-socket-io-part-2/


今天就先到這裡,我們明天見。


上一篇
Day 28:Collecting Coins
下一篇
Day 30:結論
系列文
Phaser 幫我撐個 30 天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言